<!DOCTYPE html>
<html>
<head>
    <title>工资实时计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #222;
            color: #FFD700; /* 金色文字 */
            text-align: center;
            padding: 20px;
        }
        
        #salary-display {
            font-size: 72px;
            font-weight: bold;
            margin: 50px 0;
            text-shadow: 0 0 10px #FFD700;
        }
        
        .controls {
            margin: 20px;
            padding: 15px;
            background: rgba(255, 215, 0, 0.1);
            border-radius: 10px;
        }
        
        input, button {
            padding: 10px;
            margin: 5px;
            background: #333;
            color: #FFD700;
            border: 1px solid #FFD700;
            border-radius: 5px;
        }
        
        button {
            cursor: pointer;
            transition: all 0.3s;
        }
        
        button:hover {
            background: #FFD700;
            color: #222;
        }
        
        .coin {
            position: absolute;
            width: 30px;
            height: 30px;
            background: radial-gradient(circle at 30% 30%, #FFD700, #B8860B);
            border-radius: 50%;
            animation: fall 2s linear;
            z-index: 100;
        }
        
        @keyframes fall {
            to { transform: translateY(100vh); }
        }
        
        /* 新增样式 */
        .stats-title {
            font-size: 24px;
            margin: 20px 0;
            color: #FFD700;
        }
        
        .work-time {
            font-size: 18px;
            margin: 10px 0;
            color: #FFA500;
        }
    </style>
</head>
<body>
    <h1>工资实时计算器</h1>
    
    <div class="controls">
        <input type="time" id="start-time" placeholder="上班时间">
        <input type="time" id="end-time" placeholder="下班时间">
        <input type="number" id="work-days" placeholder="每月工作天数">
        <input type="number" id="monthly-salary" placeholder="月薪总数">
        <button id="start-btn">开始计算</button>
    </div>
    
    <div id="salary-display">¥0.00</div>
    
    <div id="stats-container" style="display:none;">
        <div class="stats-title" id="earnings-title"></div>
        <div class="work-time" id="time-worked"></div>
        <button id="end-day-btn" style="margin-top:20px; padding:10px 20px;">今日搬砖战绩</button>
        <div id="daily-summary" style="font-size:24px; margin:20px 0; color:#4CAF50; display:none;"></div>
    </div>

    <script>
        // 金币掉落效果
        function createCoin() {
            const coin = document.createElement('div');
            coin.className = 'coin';
            coin.style.left = Math.random() * 100 + 'vw';
            coin.style.top = '-30px';
            document.body.appendChild(coin);
            setTimeout(() => coin.remove(), 2000);
        }

        // 计算每秒赚多少钱
        function calculateSalaryPerSecond(start, end, workDays, monthlySalary) {
            // 把时间字符串转换成数字(小时和分钟)
            const [startHour, startMinute] = start.split(':').map(Number);
            const [endHour, endMinute] = end.split(':').map(Number);
            
            // 计算每天工作多少小时(包括分钟转换)
            const dailyHours = (endHour + endMinute/60) - (startHour + startMinute/60);
            
            // 计算每月工作多少秒(小时转秒×工作天数)
            const secondsPerMonth = dailyHours * 3600 * workDays;
            
            // 用月薪除以总秒数，得到每秒赚多少钱
            return monthlySalary / secondsPerMonth;
        }

        // 当点击开始按钮时
        document.getElementById('start-btn').addEventListener('click', () => {
            // 获取用户输入的值
            const startTime = document.getElementById('start-time').value;
            const endTime = document.getElementById('end-time').value;
            const workDays = parseInt(document.getElementById('work-days').value);
            const monthlySalary = parseFloat(document.getElementById('monthly-salary').value);
            
            if (!startTime || !endTime || !workDays || !monthlySalary) {
                alert('请填写所有信息！');
                return;
            }
            
            // 显示统计容器
            document.getElementById('stats-container').style.display = 'block';
            document.getElementById('earnings-title').textContent = '你已经赚到这么多钱啦！';
            
            // 计算每秒赚多少钱
            const salaryPerSecond = calculateSalaryPerSecond(startTime, endTime, workDays, monthlySalary);
            
            // 获取上班时间(小时和分钟)
            const [startHour, startMinute] = startTime.split(':').map(Number);
            const startDate = new Date();
            startDate.setHours(startHour, startMinute, 0, 0);
            
            let totalEarned = 0;
            const display = document.getElementById('salary-display');
            
            // 每秒更新显示
            setInterval(() => {
                const now = new Date();
                // 计算已经工作的秒数
                const workedSeconds = (now - startDate) / 1000;
                
                // 精确计算已经赚了多少钱(基于实际工作时间)
                totalEarned = workedSeconds * salaryPerSecond;
                display.textContent = '¥' + totalEarned.toFixed(2);
                
                // 计算工作时间
                const diffHrs = Math.floor(workedSeconds / 3600);
                const diffMins = Math.floor((workedSeconds % 3600) / 60);
                document.getElementById('time-worked').textContent = 
                    `今日已工作时间: ${diffHrs}小时${diffMins}分钟`;
                
                // 赚的钱越多，金币掉落越多(每10元掉落1个，每100元掉落3个，每1000元掉落10个)
                if (Math.floor(totalEarned) % 10 === 0 && totalEarned > 0.5) {
                    const coinsToDrop = Math.min(
                        Math.floor(totalEarned / 1000) * 10 + 
                        Math.floor((totalEarned % 1000) / 100) * 3 + 
                        Math.floor((totalEarned % 100) / 10) * 1,
                        20 // 最多同时掉落20个金币
                    );
                    
                    for (let i = 0; i < coinsToDrop; i++) {
                        setTimeout(() => createCoin(), i * 100); // 金币分批掉落
                    }
                }
            }, 1000);
        });
        
        // 添加结算按钮功能
        document.getElementById('end-day-btn').addEventListener('click', function() {
            const now = new Date();
            const [startHour, startMinute] = document.getElementById('start-time').value.split(':').map(Number);
            const startDate = new Date();
            startDate.setHours(startHour, startMinute, 0, 0);
            
            // 计算当天工作时间(秒)
            const workedSeconds = (now - startDate) / 1000;
            const salaryPerSecond = calculateSalaryPerSecond(
                document.getElementById('start-time').value,
                document.getElementById('end-time').value,
                document.getElementById('work-days').value,
                document.getElementById('monthly-salary').value
            );
            
            // 计算当日总收入
            const dailyEarnings = workedSeconds * salaryPerSecond;
            
            // 显示结果
            document.getElementById('daily-summary').style.display = 'block';
            document.getElementById('daily-summary').innerHTML = `
                <p>今日战绩：¥${dailyEarnings.toFixed(2)}</p>
                <p>辛苦了！明天继续搬砖💪</p>
            `;
            
            // 结算时掉落大量金币庆祝
            for(let i=0; i<20; i++) {
                setTimeout(() => createCoin(), i*200);
            }
        });
    </script>
</body>
</html>